<template>
  <view class="user-info">
    <u-row>
      <u-col v-if="isLogin" span="2">
        <view class="left">
          <view class="avatar">
            <open-data type="userAvatarUrl"></open-data>
          </view>
        </view>
      </u-col>
      <u-col span="10">
        <view class="mid">
          <view v-if="isLogin" class="up">
            <span style="margin-right: 8px">{{ this.userName.substring(0, 1) + '***' }}</span>
            <view style="flex: 1"></view>
          </view>
          <view v-else class="up">
            <view style="width: 10px"></view>
            <u-button
              @click="onLoginclick"
              type="primary"
              :customStyle="cbStyles.login"
              size="mini"
              text="登录"
            ></u-button>
            后获取平台更多的服务
            <view style="flex: 1"></view>
          </view>
          <view style="height: 4px" />
          <view v-if="isLogin" class="down">
            <view><span style="margin-right: 6px; font-weight: bold">联系方式</span>{{ maskPhone }}</view>
            <!-- <u-button
              type="primary"
              :customStyle="cbStyles.modify"
              icon="edit-pen"
              size="mini"
              text="修改变更"
            ></u-button> -->
            <view style="flex: 1" />
          </view>
        </view>
      </u-col>

      <view v-if="isLogin" class="right" @click="onLoginOutclick">
        <u-icon size="28" color="#dd524d" name="close-circle"> </u-icon>
        <view>登出</view>
      </view>
    </u-row>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'userHeader',
  data() {
    return {
      cbStyles: {
        login: { width: '32px', marginRight: '6px' },
        modify: { marginLeft: '6px', width: '72px' },
      },
    }
  },
  computed: {
    ...mapGetters(['userName', 'phone']),
    isLogin() {
      return this.userName ? true : false
    },
    maskPhone() {
      return this.phone ? `${this.phone.substring(0, 4)}****${this.phone.substring(8)}` : ''
    },
  },
  created() {},
  methods: {
    onLoginOutclick() {
      this.$emit('loginout')
    },
    onLoginclick() {
      this.$emit('login')
    },
  },
}
</script>
<style lang="scss" scoped>
.user-info {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 6px 0;
  background: #f3f3f3;
  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    .avatar {
      width: 40px;
      height: 40px;
      clip-path: circle(20px at center);
    }
  }
  .mid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 28upx;
    height: 50px;

    .up {
      display: flex;
      align-items: center;
      span {
        font-weight: bold;
        color: $u-primary;
      }
      .name {
        width: 160px;
      }
    }
    .down {
      display: flex;
      align-items: center;
    }
  }
  .right {
    width: 46px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    color: #777777;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #efefef;
  }
}
</style>
